<template>
  <div>
    <!-- <h1>论坛搜索</h1> -->
    <form action="/">
      <van-search
        v-model="value"
        shape="round"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <!-- 输入框聚焦,拉起键盘搜索 -->
    <div>
      <h6>热门搜索</h6>
      <van-tag plain type="primary" class="tag" text-color="grey" color="whitesmoke">饵料</van-tag>
      <van-tag plain type="primary" class="tag">标签</van-tag>
      <van-tag plain type="primary" class="tag">麝香米</van-tag>
      <van-tag plain type="primary" class="tag">标签</van-tag>
      <van-tag plain type="primary" class="tag">标签</van-tag>
      <br />
      <van-tag plain type="primary" class="tag">逐鹿</van-tag>
      <van-tag plain type="primary" class="tag">标签</van-tag>
      <van-tag plain type="primary" class="tag">标签</van-tag>
    </div>
    <!-- 弹出默认键盘 -->
    <van-cell @touchstart.native.stop="show = true">弹出默认键盘</van-cell>
    <van-number-keyboard :show="show" @blur="show = false" @input="onInput" @delete="onDelete" />
    <!-- 搜索历史:在搜索后显示 -->
    <div v-show="false">
      <h6>搜索历史</h6>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: '',
      // 键盘是否显示
      show: true,
    };
  },
  methods: {
    //拉起键盘搜索
    // 键盘的显示
    onInput(value) {
      Toast(value);
    },
    onDelete() {
      Toast('删除');
    },
    // 搜索框的绑定
    onSearch(val) {
      Toast(val);
    },
    // 取消时跳转
    onCancel() {
      //   Toast('取消');
      this.$router.push({
        name: 'forum'
      });
    }
  }
};
</script>
<style scoped>
.del {
  color: black;
}
.tag {
  margin: 1rem;
  padding: 0.8rem;
  /* background-color:whitesmoke; */
}
</style>